<template>
  <div class="box">
    <el-container>
      <el-header>实名认证</el-header>
      <el-main>
  <el-form :model="form" >
    <el-form-item label="姓 名">
      <el-input v-model="form.name" />
    </el-form-item>
     <el-form-item label="身份证">
     <el-input v-model="form.identity" />
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="form.phone" />
    </el-form-item>
        <el-form-item label="地 址">
     <el-input v-model="form.address" />
    </el-form-item>
  </el-form>	
  <div class="el-upload__tip" style="float:left">身份证正面
   <el-upload      
     class="avatar-uploader"
     action="#"
     :auto-upload="false"
     limit="1"
     ref="upload"
     list-type="picture-card" 
     >
      <el-icon><Plus /></el-icon>
   <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
        </span>
      </div>
    </template> 
 </el-upload>

   <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</div>
 <div class="el-upload__tip" style="float:right">身份证反面
   <el-upload      
     class="avatar-uploader"
     action="#"
     :auto-upload="false"
     limit="1"
     ref="upload"
     list-type="picture-card" 
     >
        <el-icon><Plus /></el-icon>
   <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
        </span>
      </div>
    </template> 
 </el-upload>

   <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</div>


<el-button type="primary">Confirm</el-button>
    </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
// do not use same name with ref
const form = reactive({
  name: '',
  phone: '',
  identity: '',
  address: '',
})
</script>
<style scoped>
.el-header{
  margin:20px 80px;
}
.el-main{
  margin:0px 250px;
}
.box{
   border:2px solid #2d302f;
   height: 700px;
   width: 1300px;
   margin: 30px 120px;
    }
.el-button {
    margin-left: 680px;
    margin-top: 70px;
}
.el-form {
    height: 200px;
}
.el-form-item{
  margin-bottom: 28px;
}
.el-upload__tip {
   margin-top: 80px;
}
.img{
width:300px;
height:100px;
}
</style>
